import React, { Component,Fragment} from 'react'
/*
  一、回顾：事件绑定
  1、原生js事件绑定：
    1)在标签之间通过onXX=""
    2）DOM0级
    3）DOM2级
  2、jQuery的事件绑定
    1）$(选择器)。click(function{})
    2) $(选择器).on(function(){})
  3、vue
    v-on:xx=""简写形式@xx
  4、微信小程序
    bindtap
    catchtap
  二、React事件绑定
  1、绑定方式
     react中的事件绑定共有四种方式
     1、在标签内使用onClick={()=>{}}
     缺点：处理函数中的代码不能过多，过多后代码就会变得很乱
     2、在标签内使用onClick={this.类中的普通函数名}
     注意点：
     1）在调用的时候this.后面的函数只能写名称，函数后面不能带括号
     2）这里边存在一个为你就是this的指向问题
     建议：在实际开发过程中不建议使用
     3、在标签内使用onClick={this.箭头函数名}
     相对于第2种绑定方式是可以解决掉this的指向问题的，但是不能进行传值
     4、在标签种使用onClick={()=>{this.箭头函数名()}}
  2、改变this指向
     在标签内使用onClick={this.类中的普通函数名}函数种得不到this的解决方案
     onClick={this.类中的普通函数名.bind(this)}
  3、事件传值
  4、React事件绑定的底层原理
*/

export default class Left extends Component { 
  name="Giles"  
  handClick1(){
    console.log('按钮2被点击了',this);
  }
  handClick2=()=>{
    console.log('按钮3被点击了',this.name);
  }
  handClick3=(params)=>{
    console.log('按钮4被点击了');
    console.log(this);
    console.log(params);
  }
  render() {
    return (
      <Fragment>
         <button onClick={()=>{console.log('按钮1被点击了')}}>按钮1</button>
         <button onClick={this.handClick1.bind(this)}>按钮2</button>
         <button onClick={()=>{
            console.log(this);
         }}>按钮5</button>
         <button onClick={function(){
            console.log('按钮4被点击了',this);
         }.bind(this)}>按钮4</button>
         <button onClick={this.handClick2}>按钮3</button>
         <button onClick={()=>{
           this.handClick3(15)
         }}>按钮4</button>
      </Fragment>
    )
  }
}


// const teacher={
//   name:'teacher'
// }
// const student={
//   name:'student'
// }
// const person={
//   name:'person',
//   introduce(age,gender){
//     return `我是${this.name},我今年${age},我的性别是${gender}`
//   }
// }
// console.log(person.introduce(23,"男"));
// console.log(person.introduce.call(person,25,"女"));
// console.log(person.introduce.call(teacher,38,"男"));
// console.log(person.introduce.apply(student,[26,"女"]));
// const newIntroduce=person.introduce.bind(teacher)
// console.log(newIntroduce(55,"男")); 
/*
  call和apply不仅能够改变this指向，而且在改变this指向的同时，可以调用方法
  call和apply的区别是参数不一样，call的参数是参数序列，而apply的参数是一个数组
*/
